<template>
  <div  class="LifeCycleTest">
    <h1 >组件内容</h1>
    <h1 ref="msgdom">{{message}}</h1>
<!--    <button  @click="bool=!bool">显示隐藏</button>-->
    <button  @click="changeData">改变数据</button>
<!--    <son  v-if="bool"></son>-->
  </div>
</template>

<script>
// import son from "@/components/LifeCycle"
export default {
  name: 'LifeCycleTest-page',
  props: {},
  components:{
    // son
  },
  data: function () {
    return {
      bool:true,
      message: '组件改变前的数据',
    }
  },
  methods: {
    changeData(){
      this.message = '点击改变后的数据';
    },

  },
  beforeCreate() {
    console.log('ba-beforeCreate:',this.message,this.$refs.msgdom);
  },
  created: function () {
    console.log('ba-created:',this.message,this.$refs.msgdom);
  },
  beforeMount: function () {
    console.log('ba-beforeMount:',this.message,this.$refs.msgdom);

  },
  mounted: function () {
    console.log('ba-mounted:',this.message,this.$refs.msgdom);
    console.log('ba-mounted-innerHTML: ',this.$refs.msgdom.innerHTML);

  },
  beforeUpdate: function () {
    console.log('ba-beforeUpdate:',this.message,this.$refs.msgdom);
    console.log('ba-beforeUpdate-innerHTML: ',this.$refs.msgdom.innerHTML);

  },
  updated: function () {
    console.log('ba-updated:',this.message,this.$refs.msgdom);
    console.log('ba-updated-innerHTML: ',this.$refs.msgdom.innerHTML);

  },
  beforeDestroy: function () {
    console.log('ba-beforeDestroy',this.message,this.$refs.msgdom);
  },
  destroyed: function () {
    console.log('ba-destroyed',this.message,this.$refs.msgdom);
  },
}

</script>

<style scoped>
</style>

